<script setup lang="ts">
import {
  BasicShadowMap,
  SRGBColorSpace,
  NoToneMapping,
  Vector3,
  Object3D,
} from "three";
import { TresCanvas } from "@tresjs/core";
import { OrbitControls, Text3D, Html } from "@tresjs/cientos";
import cartoon_camera from "../components/mesh/cartomm_camear_mesh.vue";
import { useControls, TresLeches } from "@tresjs/leches";
import { EffectComposerPmndrs, OutlinePmndrs } from "@tresjs/post-processing";
import "@tresjs/leches/styles";
import { reactive, ref, watchEffect } from "vue";
const gl = {
  clearColor: "#82DBC5",
  shadows: true,
  alpha: false,
  shadowMapType: BasicShadowMap,
  outputColorSpace: SRGBColorSpace,
  toneMapping: NoToneMapping,
  antialias: true,
};

const { color, position } = useControls({
  color: "#008080",
  position: new Vector3(0, 0, 0),
});

watchEffect(() => {
  console.log(position.value.value.x);
  console.log(color.value.value);
});
const ClickPosition = ref([0, 0, 0]);
//鼠标是否在 物体上面
const MouseActivation = ref(false);
const OutlinePmndrsList = ref<Object3D[]>([]);
const carToomClick = (intersection: any, pointerEvent: any) => {
  if (intersection.object.type == "Mesh") {
    OutlinePmndrsList.value = [intersection.object];
    state.position = intersection.point;
    MouseActivation.value = true;
  }
  console.log("🚀 ~ carToomClick ~ OutlinePmndrsList.value:", intersection);
};
const carToomPointer = (intersection: any, pointerEvent: any) => {
  // if (intersection.object.type == "Mesh") {
  //   MouseActivation.value = true;
  //   state.position = intersection.point;
  // }
};
const state = reactive({

    sprite: true,
    transform: true,
    distanceFactor: 2,
    center: true,
    position: [0, 0, 0]
})
const test = () => {
	state.position = [0, 0, 2]
}
</script>

<template>
  <FScreenContainer :width="1920" :height="1080">
    <TresLeches />
    <TresCanvas v-bind="gl">
      <TresPerspectiveCamera :position="[4, 3, 9]" />
      <OrbitControls />

      <Suspense>
        <EffectComposerPmndrs>
          <!--
            outlinedObjects 需要高光的物体 需要传入一个[Object3D]
            edge-strength="200"：这是一个数值属性，设置轮廓的强度。值越大，轮廓越明显
            pulse-speed="1"：这是一个数值属性，设置轮廓的脉冲速度。值越大，脉冲越快 这样属性会让边框闪光
            visible-edge-color="#FF8C00"：这是一个颜色属性，设置可见轮廓的颜色
            hiddenEdgeColor="#8a90f3"：这是一个颜色属性，设置隐藏轮廓的颜色
            blur="true"：这是一个布尔属性，设置是否启用模糊效果
            multisampling="800"：这是一个数值属性，设置多采样级别。值越大，渲染效果越好，但计算量也越大
             -->
          <OutlinePmndrs
            :outlinedObjects="OutlinePmndrsList"
            :edge-strength="100"
            :pulse-speed="1"
            visible-edge-color="#FF8C00"
            hiddenEdgeColor="#8a90f3"
            :blur="true"
            :multisampling="1"
          />
        </EffectComposerPmndrs>
      </Suspense>

      <Suspense>
        <cartoon_camera
          :materialColor="color.value"
          :position="position.value"
          @click="
            (intersection, pointerEvent) =>
              carToomClick(intersection, pointerEvent)"
          @pointer-enter="
            (intersection, pointerEvent) =>
              carToomPointer(intersection, pointerEvent)"
        >


        </cartoon_camera>

      </Suspense>

      <TresDirectionalLight
        :position="[0, 2, 4]"
        :intensity="1.2"
        cast-shadow
      />
      <TresGridHelper />
      <Html
      v-bind="state"
          >
            <div class="sci-fi-border">I'm a Box 📦</div>
          </Html>
    </TresCanvas>
  </FScreenContainer>
</template>

<style>
.sci-fi-border {
  position: relative;
  display: inline-block;
  padding: 20px;
  background-color: #1e3c72; /* 深邃背景色 */
  color: white;
  border-radius: 25px;
  /* 应用多个动画 */
  animation-name: floatAnimation, breathing;
  animation-duration: 3s, 4s; /* 分别为两个动画设置持续时间 */
  animation-iteration-count: infinite; /* 动画播放次数：无限 */
  animation-timing-function: ease-in-out, ease-in-out; /* 各自的速度曲线 */
  overflow: hidden;
}
@keyframes floatAnimation {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-40px); /* 元素上移40px */
  }
}
@keyframes breathing {
  0% {
    box-shadow: 0 0 15px 5px rgba(0, 255, 255, 0.8),
      /* 初始颜色 */ inset 0 0 15px 5px rgba(0, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 30px 10px rgba(255, 0, 255, 0.8),
      /* 对比色 */ inset 0 0 30px 10px rgba(255, 0, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 15px 5px rgba(0, 255, 255, 0.8),
      inset 0 0 15px 5px rgba(0, 255, 255, 0.5);
  }
}
</style>
